// 手机的宽度
var windowWRPX = 750
// 拖动时候的 pageX
var pageX = 0
// 拖动时候的 pageY
var pageY = 0

var pixelRatio = wx.getSystemInfoSync().pixelRatio
 
// 调整大小时候的 pageX
var sizeConfPageX = 0
// 调整大小时候的 pageY
var sizeConfPageY = 0

var initDragCutW = 0
var initDragCutL = 0
var initDragCutH = 0
var initDragCutT = 0

// 移动时 手势位移与 实际元素位移的比
var dragScaleP = 2
const app=getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    animationData: {},
    // imageSrc: 'https://lpd.hi-finance.com.cn/20170918001.jpg',
    // 'https://lpd.hi-finance.com.cn/9019013.png'
    //imageSrc: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
    returnImage: '',
    isShowImg: false,
    // 初始化的宽高
    cropperInitW: windowWRPX,
    cropperInitH: windowWRPX,
    // 动态的宽高
    cropperW: windowWRPX,
    cropperH: windowWRPX,
    // 动态的left top值
    cropperL: 0,
    cropperT: 0,

    // 图片缩放值
    scaleP: 0,
    imageW: 0,
    imageH: 0,

    // 裁剪框 宽高
    cutW: 0,
    cutH: 0,
    cutL: 0,
    cutT: 0,
    photoid:'',//返回路径
    imageSrc:''//需要处理的图片
  },
  cData:{},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("caijian", options)
    this.setData({
      "photoid": options.photoid,
      "imageSrc": options.imgfile
    })
    this.animation = wx.createAnimation({
      duration: 0,
      timingFunction: 'ease',
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var _this = this

    wx.showLoading({
      title: '图片加载中...',
    })

    wx.getImageInfo({
      src: _this.data.imageSrc,
      success: function success(res) {
 
        var innerAspectRadio = res.width / res.height;
        var imgtype = _this.data.photoid;
        // 根据图片的宽高显示不同的效果   保证图片可以正常显示
        if (innerAspectRadio >= 1) {
          if (imgtype==1){
                _this.setData({
                  cropperW: windowWRPX,
                  cropperH: windowWRPX / innerAspectRadio,
                  // 初始化left right
                  cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
                  cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
                  // 裁剪框  宽高  
                  cutW: windowWRPX - 500,
                  cutH: windowWRPX / innerAspectRadio - 200,
                  cutL: Math.ceil((windowWRPX - windowWRPX + 500) / 2),
                  cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 200)) / 2),
                  // 图片缩放值
                  scaleP: res.width * pixelRatio / windowWRPX,
                  // 图片原始宽度 rpx
                  imageW: res.width * pixelRatio,
                  imageH: res.height * pixelRatio
                })
            }else{
                _this.setData({
                  cropperW: windowWRPX,
                  cropperH: windowWRPX / innerAspectRadio,
                  // 初始化left right
                  cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
                  cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
                  // 裁剪框  宽高  
                  cutW: windowWRPX - 200,
                  cutH: windowWRPX / innerAspectRadio - 200,
                  cutL: Math.ceil((windowWRPX - windowWRPX + 200) / 2),
                  cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 200)) / 2),
                  // 图片缩放值
                  scaleP: res.width * pixelRatio / windowWRPX,
                  // 图片原始宽度 rpx
                  imageW: res.width * pixelRatio,
                  imageH: res.height * pixelRatio
                })
            } 
        } else {
          if (imgtype == 1) {
            _this.setData({
              cropperW: windowWRPX * innerAspectRadio,
              cropperH: windowWRPX,
              // 初始化left right
              cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
              cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
              // 裁剪框的宽高
              cutW: windowWRPX * innerAspectRadio - 250,
              cutH: 200,
              cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 250)) / 2),
              cutT: Math.ceil((windowWRPX - 200) / 2),
              // 图片缩放值
              scaleP: res.width * pixelRatio / windowWRPX,
              // 图片原始宽度 rpx
              imageW: res.width * pixelRatio,
              imageH: res.height * pixelRatio
            })

          }else{
            _this.setData({
              cropperW: windowWRPX * innerAspectRadio,
              cropperH: windowWRPX,
              // 初始化left right
              cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
              cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
              // 裁剪框的宽高
              cutW: windowWRPX * innerAspectRadio - 50,
              cutH: 200,
              cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 50)) / 2),
              cutT: Math.ceil((windowWRPX - 200) / 2),
              // 图片缩放值
              scaleP: res.width * pixelRatio / windowWRPX,
              // 图片原始宽度 rpx
              imageW: res.width * pixelRatio,
              imageH: res.height * pixelRatio
            })
          }

         
        }
        _this.setData({
          isShowImg: true
        })
        wx.hideLoading()
        _this.cData.cutL = _this.data.cutL;
        _this.cData.cutT = _this.data.cutT;
      }
    })
  },

  // 拖动时候触发的touchStart事件
  contentStartMove(e) {
    pageX = e.touches[0].pageX
    pageY = e.touches[0].pageY
  },

  // 拖动时候触发的touchMove事件
  contentMoveing(e) {
    var _this = this
    /*var dragLengthX = (pageX-e.touches[0].pageX) * dragScaleP
    var dragLengthY = (pageY-e.touches[0].pageY)* dragScaleP
    var minX = Math.max(this.cData.cutL - (dragLengthX), 0)
    var minY = Math.max(this.cData.cutT - (dragLengthY), 0)
    var maxX = _this.data.cropperW - _this.data.cutW
    var maxY = _this.data.cropperH - _this.data.cutH
    this.cData.cutL = Math.min(maxX, minX);
    this.cData.cutT = Math.min(maxY, minY);
    this.animation.translate(this.cData.cutL, this.cData.cutT).step();
    this.setData({
      animationData: this.animation.export()
    })
    pageX = e.touches[0].pageX
    pageY = e.touches[0].pageY*/
    var dragLengthX = (pageX - e.touches[0].pageX) * dragScaleP
    var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP
    /*var minX = Math.max(_this.cData.cutL - (dragLengthX), 0)
    var minY = Math.max(_this.cData.cutT - (dragLengthY), 0)
    var maxX = _this.data.cropperW - _this.data.cutW
    var maxY = _this.data.cropperH - _this.data.cutH
    this.cData.cutL = Math.min(maxX, minX);
    this.cData.cutT = Math.min(maxY, minY);
    this.animation.translate(this.cData.cutL, this.cData.cutT).step();
    this.setData({
      animationData: this.animation.export()
    })*/
    var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
    var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
    var maxX = _this.data.cropperW - _this.data.cutW
    var maxY = _this.data.cropperH - _this.data.cutH
    _this.setData({
      cutL: Math.min(maxX, minX),
      cutT: Math.min(maxY, minY),
    })
    //console.log(`${maxX} ----- ${minX}`)
    pageX = e.touches[0].pageX
    pageY = e.touches[0].pageY
    // _this.data.cutL + (e.touches[0].pageX - pageX)
    // console.log(e.touches[0].pageX)
    // console.log(e.touches[0].pageX - pageX)
    
  },
  contentEndMove(e){
    
  },
  // 获取图片
  getImageInfo() {
    var _this = this
    wx.showLoading({
      title: '图片生成中...',
    }) 
    wx.downloadFile({
      url: _this.data.imageSrc, //仅为示例，并非真实的资源
      success: function (res) {
        // 将图片写入画布
        const ctx = wx.createCanvasContext('myCanvas') 
        ctx.drawImage(res.tempFilePath)
        ctx.draw(false,function(){ 
          console.log(1);
          // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
          var canvasW = _this.data.cutW / _this.data.cropperW * _this.data.imageW / pixelRatio
          var canvasH = _this.data.cutH / _this.data.cropperH * _this.data.imageH / pixelRatio
          var canvasL = _this.data.cutL / _this.data.cropperW * _this.data.imageW / pixelRatio
          var canvasT = _this.data.cutT / _this.data.cropperH * _this.data.imageH / pixelRatio
          console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW}  ------- _this.data.imageH: ${_this.data.imageH}`)
          wx.canvasToTempFilePath({
            x: canvasL,
            y: canvasT,
            width: canvasW,
            height: canvasH,
            destWidth: canvasW,
            destHeight: canvasH,
            canvasId: 'myCanvas',
            success: function (res) { 
              wx.hideLoading();
              var imgtype = _this.data.photoid;
              var tempFilePath=res.tempFilePath;
              // 成功获得地址的地方
              if (imgtype==1){ 
              wx.uploadFile({
                url: app.globalData.UploadUrl,
                filePath: tempFilePath,
                name: 'file',
                formData: {
                  'category': 1
                },
                success: function (res) {
                  var data = JSON.parse(res.data);
                  console.log(data.data);
                  app.globalData.tempUrl = data.data;
                  setTimeout(function () {
                    wx.navigateBack({
                      delta: 2
                    });
                  }, 2000) 
                }
              }) 
             
              } else if (imgtype == 2){
                wx.uploadFile({
                  url: app.globalData.UploadUrl,
                  filePath: tempFilePath,
                  name: 'file',
                  formData: {
                    'category': 2
                  },
                  success: function (res) {
                    var data = JSON.parse(res.data);
                    console.log(data.data);
                    app.globalData.RevealImg = data.data;
                  }
                })
                setTimeout(function () {
                  wx.navigateBack({
                    delta: 2
                  });
                }, 1000)  
              }else{
                console.log(res.tempFilePath);
              }  

            }
          })
        });
        
      }
    })
  },

  // 设置大小的时候触发的touchStart事件
  dragStart(e) {
    var _this = this
    sizeConfPageX = e.touches[0].pageX
    sizeConfPageY = e.touches[0].pageY
    initDragCutW = _this.data.cutW
    initDragCutL = _this.data.cutL
    initDragCutT = _this.data.cutT
    initDragCutH = _this.data.cutH
  },

  // 设置大小的时候触发的touchMove事件
  dragMove(e) {
    var _this = this
    var dragType = e.target.dataset.drag 
    switch (dragType) {
      case 'right':
        var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP  
       // console.log("right", initDragCutH >= dragLength )
        console.log("initDragCutH", initDragCutH)
        console.log("dragLength", dragLength)
        if (initDragCutH - 50 >= dragLength) {
          // 如果 移动小于0 说明是在往下啦  放大裁剪的高度  这样一来 图片的高度  最大 等于 图片的top值加 当前图片的高度  否则就说明超出界限
          if (dragLength < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) {
            
            this.setData({
              cutW: initDragCutW - dragLength,
              cutH: initDragCutH - dragLength, 
            })
          }
          // 如果是移动 大于0  说明在缩小  只需要缩小的距离小于原本裁剪的高度就ok
          if (dragLength > 0) {
            this.setData({
              cutW: initDragCutW - dragLength,
              cutH: initDragCutH - dragLength, 
            })
          }
          else {
            return
          }
        } else {
          return
        }
        break;
      case 'left':
        var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP
        console.log("initDragCutH", initDragCutH)
        console.log("dragLength", dragLength)
        //initDragCutW >= dragLength && initDragCutL > dragLength
        if (initDragCutH-50 >= Math.abs(dragLength)) {
          // if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return
          console.log(_this.data.cropperW > initDragCutL + _this.data.cutW);
          if (_this.data.cropperH > initDragCutT + _this.data.cutH) {
              this.setData({
                cutL: initDragCutL - dragLength,
                cutW: initDragCutW + dragLength,
                cutH: initDragCutH + dragLength,
                cutT: initDragCutT - dragLength,
              })
          }else{
            console.log("left")
            return;
          }
          if (dragLength > 0) {
            this.setData({
              cutL: initDragCutL - dragLength,
              cutW: initDragCutW + dragLength,
              cutH: initDragCutH + dragLength,
              cutT: initDragCutT - dragLength,
            })
          }
          else {
            return
          }



          // this.setData({
          //   cutL: initDragCutL - dragLength,
          //   cutW: initDragCutW + dragLength,
          //   cutH: initDragCutH + dragLength,
          //   cutT: initDragCutT - dragLength,
          // })
        } else {
          return;
        }
        break;
      case 'top':
        var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
        console.log("initDragCutH", initDragCutH)
        console.log("dragLength", dragLength)
        //initDragCutH >= dragLength && initDragCutT > Math.abs(dragLength)
        if (initDragCutH - 50 >= Math.abs(dragLength)) {
          // if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return
          // this.setData({
          //   cutT: initDragCutT - dragLength,
          //   cutH: initDragCutH + dragLength, 
          //   cutL: initDragCutL - dragLength,
          //   cutW: initDragCutW + dragLength, 
          // })
          console.log(_this.data.cropperH > initDragCutT + _this.data.cutH)
          if (_this.data.cropperH > initDragCutT + _this.data.cutH) {
              this.setData({
                cutH: initDragCutH + dragLength,
                cutW: initDragCutW + dragLength,
              })
          }else{
            return
            console.log("dddd")
          } 
            // 如果是移动 大于0  说明在缩小  只需要缩小的距离小于原本裁剪的高度就ok
          if (dragLength > 0) {
              this.setData({
                cutH: initDragCutH + dragLength,
                cutW: initDragCutW + dragLength,
              })
            }
            else {
              return
            }
        } else {
          return;
        }
        break;
      case 'bottom':
        var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
        // console.log(_this.data.cropperH > _this.data.cutT + _this.data.cutH)
        console.log("bottom",dragLength)
        console.log(initDragCutH >= dragLength)
        console.log(_this.data.cropperH > initDragCutT + _this.data.cutH)
        // 必须是 dragLength 向上缩小的时候必须小于原本的高度
        if (initDragCutH-50 >= dragLength) {
          // 如果 移动小于0 说明是在往下啦  放大裁剪的高度  这样一来 图片的高度  最大 等于 图片的top值加 当前图片的高度  否则就说明超出界限
          if (dragLength < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) {
            this.setData({
              cutH: initDragCutH - dragLength,
              cutW: initDragCutW - dragLength,
            })
          }
          // 如果是移动 大于0  说明在缩小  只需要缩小的距离小于原本裁剪的高度就ok
          if (dragLength > 0) {
            this.setData({
              cutH: initDragCutH - dragLength,
              cutW: initDragCutW - dragLength,
            })
          }
          else {
            return
          }
        } else {
          return
        }
        break;
      // case 'rightBottom':
      //   var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
      //   var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
      //   if (initDragCutH >= dragLengthY && initDragCutW >= dragLengthX) {
      //     // bottom 方向的变化
      //     if ((dragLengthY < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) || (dragLengthY > 0)) {
      //       this.setData({
      //         cutH: initDragCutH - dragLengthY,
              
      //       })
      //     }

      //     // right 方向的变化
      //     if ((dragLengthX < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) || (dragLengthX > 0)) {
      //       this.setData({
      //         cutW: initDragCutW - dragLengthX
      //       })
      //     }
      //     else {
      //       return
      //     }
      //   } else {
      //     return
      //   }
      //   break;
      // default:
      //   break;
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})